<!DOCTYPE html>
<html>
<title>YM-TV</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<head>
<script type="text/javascript">
	var i=1;
	var j=1;
	function switch_()
	{
		if (i==1)
		{
			document.getElementById("screen").style.backgroundColor="#999";
			setTimeout(function(){
				movie.play();
				document.getElementById("movie").style.display="block";
			},2000);
			i=0;
		}
		else
		{
			document.getElementById("screen").style.backgroundColor="#666";
			document.getElementById("movie").style.display="none";
			movie.pause();
			i=1;
		}
	}

	function control()
	{
		var aaa=document.getElementById("sound");
		aaa.style.transform="translate(50%,50%) rotate("+(30*j)+"deg)";
		document.getElementById("movie").volume = 0.5+j*0.1;
		j++;
	}
</script>
</head>
<body style="background-image:url('img/bg.png');height:100%;overflow:hidden;" onselectstart="return false;"
onselect="document.selection.empty();" oncopy="return false;" ondragstart="return false;" oncontextmenu="return false;">
	<div id="load" style="position:absolute;width:100%;height:100%;background-image:radial-gradient(#e61600,#d51e1e);top:50%;left:50%;transform:translate(-50%,-50%);z-index:99999999999;transition:all 0.2s;-webkit-transition:all 0.2s;overflow:hidden">
		<div id="logo" style="position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:30%;border-radius:25%;transition:all 0.3s">
			<svg version="1.1" id="logo1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="100%" height="100%" viewBox="0 0 200 200" enable-background="new 0 0 200 200" xml:space="preserve" style="position:absolute;top:0px;left:0px;transform:rotate(40deg);transition:transform 0.5s,opacity 0.2s;opacity:0">
				<g>
					<path id="path1" style="transition:all 0.3s" fill="#eee" fill-rule="evenodd" clip-rule="evenodd" d="M104.467,114.866c2.082-1.055,4.043-2.266,5.866-3.666
						c12.355-9.492,22.662-21.808,24.467-41.867c0.556-6.177,0.153-12.274-1.066-17.4c-3.045-12.798-10.257-21.19-18.2-29.133
						c-1.649-1.649-3.342-3.207-5.066-4.733c-0.013-0.057,0.025-0.063,0.066-0.067c16.002,1.208,29.391,4.949,39,12.733
						c4.59,3.718,8.638,8.75,10.934,14.933c1.228,3.308,2.066,6.873,2.066,10.867c0,8.236-2.874,14.393-5.866,20
						c-4.496,8.425-10.46,15.406-17.667,21.133c-7.23,5.748-15.594,10.253-24.866,13.933
						C111.031,112.831,107.868,114.13,104.467,114.866z"/>
				</g>
			</svg>
			<svg version="1.1" id="logo2" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="100%" height="100%" viewBox="0 0 200 200" enable-background="new 0 0 200 200" xml:space="preserve" style="position:absolute;top:0px;left:0px;transform:rotate(40deg);transition:transform 0.5s,opacity 0.2s;opacity:0">
				<g>
					<path id="path2" style="transition:all 0.3s" fill="#eee" fill-rule="evenodd" clip-rule="evenodd" d="M53.067,111.267c0.686,0.124,1.25,0.557,1.866,0.867
						c9.263,4.656,19.804,8.498,32.667,9.6c14.629,1.252,27.21-2.431,37.2-7.333c10.064-4.939,18.953-11.087,26.467-18.601
						c5.572-5.572,10.043-12.479,13.533-20.267c1.197-2.67,2.342-5.395,3.334-8.2c1.084,1.811,1.619,3.957,2.267,6.066
						c1.927,6.287,3.149,13.438,3.6,21.2c0.62,10.693-0.382,21.225-3,29.733c-5.155,16.755-15.744,28.636-33.667,32.601
						c-9.604,2.124-21.114,1.355-29.8-0.8c-8.851-2.197-16.543-5.784-23.2-9.934C70.612,137.646,59.967,126.44,53.067,111.267z"/>
				</g>
			</svg>
			<svg version="1.1" id="logo3" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="100%" height="100%" viewBox="0 0 200 200" enable-background="new 0 0 200 200" xml:space="preserve" style="position:absolute;top:0px;left:0px;transition:transform 0.5s,opacity 0.2s;opacity:0">
				<g>
					<path id="path3" style="transition:all 0.3s" fill="#eee" fill-rule="evenodd" clip-rule="evenodd" d="M45.8,46.6c0.076,0.013,0.037,0.067,0,0.066 c-2.691,6.202-4.736,13.1-5.867,20.867c-1.138,7.826-1.205,17.138,0.134,24.8c2.589,14.819,8.422,27.449,15.933,37.4
					c15.29,20.257,37.168,34.188,71.467,35.2c0.229,0.108-0.224,0.273-0.4,0.399c-2.864,2.047-6.557,3.664-10.2,5
					c-3.988,1.464-8.317,2.664-12.866,3.4c-4.907,0.795-10.315,1.102-15.267,0.733c-9.945-0.739-17.805-3.776-24.667-7.8
					c-10.231-6.001-18.08-14.288-24.6-24.067C35.14,136.111,31.549,128.94,29,120.533c-2.517-8.302-4.074-18.16-3.267-28.8
					c0.746-9.825,2.972-18.453,6.533-25.934c1.725-3.624,3.679-7.147,5.867-10.4C40.331,52.132,42.819,49.099,45.8,46.6z"/>
				</g>
			</svg>
		</div>
		<script type="text/javascript" src="jquery.min.js"></script>
		<script type="text/javascript">
			$("#logo").height($("#logo").width());
			window.onload=(function(){
				setTimeout(function(){
					document.getElementById("logo3").style.opacity=1;
				},100)
				setTimeout(function(){
					document.getElementById("logo2").style.opacity=1;
					document.getElementById("logo2").style.transform="rotate(0deg)";
				},200)
				setTimeout(function(){
					document.getElementById("logo1").style.opacity=1;
					document.getElementById("logo1").style.transform="rotate(0deg)";
				},400)
				setTimeout(function(){
					$("#logo").css({"backgroundColor":"#eee"});
					$("#path1").attr("fill","#e61600");
					$("#path2").attr("fill","#e61600");
					$("#path3").attr("fill","#e61600");
				},1500)
				setTimeout(function(){
				document.getElementById("load").style.height="0px";
				document.getElementById("movie").onended=function()
				{
					document.getElementById("movie").style.display="none";
					document.getElementById("screen").style.backgroundColor="#666";
					i=1;
					document.getElementById("movie").volume = 0.5;
				}
			},3000)
			})
		</script>
	</div>
	<div style="position:absolute;bottom:0px;left:50%;width:1054px;height:675px;transform:translate(-50%,0px);z-index:999;">
		<div style="position:absolute;top:30px;left:-30px;width:1000px;height:666px;box-shadow:90px -40px 130px #000;opacity:0.4"></div>
		<div style="position:absolute;top:30px;left:30px;width:1000px;height:666px;box-shadow:-40px 0px 100px #000;opacity:0.2"></div>
		<div id="screen" style="position:absolute;top:64px;left:74px;background-color:#666;width:698px;height:532px">
			<video id="movie" src="img/movie2.mp4" preload="load" style="width:698px;height:532px;display:none"></video>
		</div>
		<img src="img/tv.png" style="position:absolute;top:0px;left:0px;">
		<img id="monster" src="img/monster.png" style="position:absolute;bottom:675px;left:200px;">
		<img id="sound" src="img/sound.png" style="position:absolute;bottom:296px;right:95px;transform:translate(50%,50%);cursor:pointer;transition:all 0.5s;" onclick="control()">
		<div style="width:26px;height:205px;position:absolute;bottom:151px;right:169px;cursor:pointer;" onclick="switch_()"></div>
	</div>
</body>
</html>